<template>
	<!-- 时间轴组件 -->
	<view>
		<view class="timeline_outer" v-for="(item, index) in list" :key="index">
			<view class="timeline_outer_title">{{ item.date }}</view>
			<!-- -->
			<view class="timeline_outer_main" v-for="(item1, index1) in item.activities" :key="index1" >
				<view class="timeline_left">
					<view class="timeLine_left_info">
						<view class="top">16</view>
						<view class="bottom">周日</view>
					</view>
				</view>
				<view class="timeline-right" @click="toActiveInfo(item1.id)">
					<image class="timeline-right-image" :src="item1.activityPhoto"></image>
					<view class="timeline-right-info">
						<view class="active-main">
							<text class="active">活动</text>
							<text>·</text>
							<text class="info">{{item1.activityName}}</text>
						</view>
						<view class="active-state">
							{{item1.status	| status}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
			
	},
	data() {
		return {
		};
	},
	methods: {
		toActiveInfo(id) {
			uni.navigateTo({
			    url: `/pages/activityInfo/activityInfo?id=${id}`
			});
		}
	}
};
</script>

<style scoped lang="less">
.timeline_outer {
	width: 100%;
	padding-bottom: 10px;
}
.timeline_outer_title {
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 10px;
}
.timeline_outer_main {
	display: flex;
	flex-direction: row;
}

.timeline_left {
	width: 50px;
	position: relative;
	height: 50px;
	z-index: 99;
	padding-right: 10px;
	&:before {
		content: '';
		display: inline-block;
		width: 1px;
		height: 105px;
		position: absolute;
		background-color: #ccc;
		top: 0px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}
	.timeLine_left_info {
		position: absolute;
		width: 45px;
		top: 10px;
		padding: 5px 0px;
		z-index: 9;
		view {
			font-size: 14px;
			text-align: center;
			background-color: #fff;
		}
		.top {
			padding-top: 5px;
		}
		.bottom {
			padding-bottom: 5px;
		}
	}
	
}
.timeline-right {
	flex: 1;
	padding: 10px;
	display: flex;
	box-shadow: 0px 0px 5px #ccc;
	border-radius: 5px;
	margin-bottom: 20px;
	.timeline-right-image {
		width: 120px;
		height: 65px;
		border-radius: 5px;
	}
	.timeline-right-info {
		flex: 1;
		padding-left: 10px;
		.active-main {
			height: 40px;
			line-height: 20px;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			text {
				font-size: 12px;
				height: 20px;
				line-height: 20px;
			}
			.active {
				color: #b49140;
			}
			.info {
			}
		}
		.active-state {
			font-size: 12px;
			height: 25px;
			line-height: 25px;
			color: #ccc;
		}
	}
}
</style>